<script setup lang="ts">
import {ref, onMounted} from 'vue'
import List from './components/List.vue'
import axios from 'axios'
import type { ChannelItem, ChannelRes } from './types/data'
//核心实现步骤
//1.声明响应式列表数据(ref + TS)
/* type ChannelItem = {
  id: number
  name: string
}
type ChannelRes = {
  data: {
    channels: ChannelItem[]
  }
  message: string
} */
const channelList = ref<ChannelItem[]>([])
//2.axios获取后端数据(axios.request<类型>)
/* vue2写法
 export function editCardAPI(data) {
    return request({
        url: '/parking/card/edit',
        method: 'put',
       请求体，用于传复杂数据 
        data
    })
} */
const getList = async () => {
  const res = await axios.request<ChannelRes>({
    url: 'http://geek.itheima.net/v1_0/channels',
    method: 'GET'
  })
  //3.后端数据赋值给响应式列表（类型自然匹配）
  channelList.value = res.data.data.channels
  // console.log(channelList.value)
}
onMounted(() => getList())
//4.响应式列表渲染到模板（类型提示）
//频道id
/* 数据从父组件通过:channel-id="channelId"传递到子组件，具体为使用 :channel-id 的 props 将父组件的 channelId 响应式变量传递给子组件
子组件在
type Props = {
  channelId: number
}
注解接收的变量类型
const props = defineProps<Props>()  实际应该为defineProps<{ channelId: number }>，这里把channelId: number提前在Props中注解了
在params: {
  channel_id: props.channelId,  // 中使用父组件传递的 channelId，这部分的channel_id命名是后端接口要求的，父组件中channel-id是自定义的，二者没关联
  timestamp: Date.now()
} */
const channelId = ref(0)
const tabChange = (id: number) => {
  // console.log(id)
  channelId.value = id
}
</script>

<template>
  <!-- tab切换 -->
  <van-tabs @change="tabChange">
    <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
      <!-- 文章列表组件 -->
      <List :channel-id="channelId"/>
    </van-tab>
  </van-tabs>

</template>


